
export default {
  name: "pieEchart",
  props:["params"],
  data:function () {
    return ({
      width: 100,
      height: 100,
      pieEchartsId:"pie-echarts-"+parseInt(new Date().getTime()*Math.random())
    })
  },
  mounted:function () {
    let _this = this;
    let width = document.getElementById(_this.pieEchartsId).parentNode.offsetWidth;
    let height = document.getElementById(_this.pieEchartsId).parentNode.offsetHeight;
    _this.width = parseFloat(width);
    _this.height = parseFloat(height);
    setTimeout(function () {
      _this.drawEchartsFunc();
    },0);
  },
  methods:{
    set0ptions: function (tmpParams) {
      let _this = this;
      let params = tmpParams;
      let legendData = [];
      for(let tpLength = 0;tpLength<tmpParams.data.length;tpLength++){
        legendData.push(tmpParams.data[tpLength].name)
      }
      let option = {
        title : {
          text:"",
          x:'center'
        },
        tooltip : {
          enterable:true,
          trigger: 'item',
          textStyle: {
            "fontSize": 18
          },
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: "0%",
          top: '-3%',
        },
        legend: {
          show:false,
          orient: 'vertical',
          left: 'left',
          textStyle: {
            "fontSize": 18
          },
          data:legendData
        },
        series : [
          {
            name: tmpParams.title,
            type: 'pie',
            radius : '65%',
            center: ['50%', '60%'],
            label: {
              normal: {
                formatter: '{b|{b}：}{per|{d}%}  ',
                textStyle : {
                  fontWeight : 28
                },
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 28,
                    padding: [2, 4],
                  },
                  per: {
                    fontSize: 30,
                    padding: [2, 4],
                  }
                }
              }
            },
            color:["#ee572c","#6ec9ca","#f3af42"],
            data:tmpParams.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;
    },
    drawEchartsFunc:function () {
      let _this = this;
      let params = _this.params;
      let option = _this.set0ptions(params);
      let echartsId = document.getElementById(_this.pieEchartsId);
      let myEcharts = _this.$echarts.init(echartsId);
      myEcharts.setOption(option);
      for(let dLength = 0;dLength< params.data.length;dLength++){
        myEcharts.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: dLength
        });
      }
    }
  }
}
